<template>
  <div class="login-container">
    <div class="login-header">
      <div class="logo-container">
        <logo-svg />
        <h1>Management System</h1>
      </div>
    </div>
    
    <div class="main-content">
      <div class="left-section">
        <div class="welcome-text">
          <logo-svg class="large-logo" />
          <h2>Welcome Back</h2>
          <p>Professional Management System</p>
        </div>
      </div>
      
      <a-card class="login-box">
        <div class="form-header">
          <h2>账号登录</h2>
          <p class="sub-title">请使用您的账号密码登录系统</p>
        </div>
        
        <a-form
          :model="formState"
          name="basic"
          @finish="handleLogin"
          autocomplete="off"
        >
          <a-form-item
            name="username"
            :rules="[{ required: true, message: '请输入用户名!' }]"
          >
            <a-input
              v-model:value="formState.username"
              placeholder="请输入用户名"
              size="large"
            >
              <template #prefix>
                <user-outlined />
              </template>
            </a-input>
          </a-form-item>

          <a-form-item
            name="password"
            :rules="[{ required: true, message: '请输入密码!' }]"
          >
            <a-input-password
              v-model:value="formState.password"
              placeholder="请输入密码"
              size="large"
            >
              <template #prefix>
                <lock-outlined />
              </template>
            </a-input-password>
          </a-form-item>

          <div class="login-options">
            <a-checkbox v-model:checked="formState.remember">记住我</a-checkbox>
            <a class="forgot-link">忘记密码？</a>
          </div>

          <a-form-item>
            <a-button 
              type="primary" 
              html-type="submit" 
              block 
              :loading="loading"
              size="large"
            >
              登录
            </a-button>
          </a-form-item>
        </a-form>
        
        <div class="other-login">
          <div class="divider">
            <span>其他登录方式</span>
          </div>
          <div class="social-login">
            <a-button shape="circle" class="social-btn">
              <template #icon><WechatOutlined /></template>
            </a-button>
            <a-button shape="circle" class="social-btn">
              <template #icon><QqOutlined /></template>
            </a-button>
            <a-button shape="circle" class="social-btn">
              <template #icon><DingdingOutlined /></template>
            </a-button>
          </div>
        </div>
      </a-card>
    </div>
    
    <div class="login-footer">
      <p>Copyright © {{ new Date().getFullYear() }} Company Name. All rights reserved.</p>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { 
  UserOutlined, 
  LockOutlined,
  WechatOutlined,
  QqOutlined,
  DingdingOutlined
} from '@ant-design/icons-vue';
import LogoSvg from '@/components/LogoSvg.vue';

const loading = ref(false);
const formState = reactive({
  username: '',
  password: '',
  remember: false,
});

const handleLogin = async (values) => {
  try {
    loading.value = true;
    console.log('登录信息：', values);
    await new Promise(resolve => setTimeout(resolve, 1000));
  } finally {
    loading.value = false;
  }
};
</script>

<style scoped>
/* 添加全局重置样式 */
:root {
  height: 100%;
}

/* 修改容器样式 */
.login-container {
  min-height: 100vh;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4e8eb 100%);
  overflow: hidden;
  position: fixed; /* 添加固定定位 */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

/* 修改主内容区域样式 */
.main-content {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  gap: 80px;
  height: calc(100% - 64px - 50px); /* 使用相对单位 */
  position: relative; /* 添加相对定位 */
  overflow: hidden; /* 防止滚动 */
}

/* 修改左侧区域样式 */
.left-section {
  display: none;
  @media (min-width: 992px) {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50%; /* 改用百分比宽度 */
    height: 100%;
    background: rgba(24, 144, 255, 0.02);
    position: absolute; /* 绝对定位 */
    left: 0;
    top: 0;
  }
}

/* 修改登录框样式 */
.login-box {
  width: 100%;
  max-width: 400px;
  border-radius: 8px;
  margin: 0 20px;
  position: relative; /* 添加相对定位 */
  z-index: 1; /* 确保在左侧区域之上 */
  @media (min-width: 992px) {
    margin-left: 50%; /* 大屏幕时向右偏移 */
    transform: translateX(-50%); /* 居中调整 */
  }
}

/* 修改页脚样式 */
.login-footer {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  margin: 0;
  padding: 0;
  position: relative; /* 添加相对定位 */
  z-index: 1; /* 确保在其他元素之上 */
}

/* 添加一些响应式调整 */
@media (max-height: 600px) {
  .login-header {
    height: 50px; /* 在小屏幕上减小头部高度 */
  }
  
  .login-footer {
    height: 40px; /* 在小屏幕上减小底部高度 */
  }
  
  .main-content {
    height: calc(100% - 50px - 40px); /* 相应调整主内容区域高度 */
  }
}

.logo-container {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo-container h1 {
  margin: 0;
  font-size: 18px;
  color: rgba(0, 0, 0, 0.85);
  font-weight: 600;
}

.welcome-text {
  text-align: center;
  color: #1890ff;
}

.large-logo {
  width: 120px;
  height: 120px;
  margin-bottom: 24px;
}

.welcome-text h2 {
  font-size: 48px;
  margin-bottom: 16px;
}

.welcome-text p {
  font-size: 20px;
  opacity: 0.8;
}

.form-header {
  text-align: center;
  margin-bottom: 32px;
}

.form-header h2 {
  font-size: 24px;
  color: rgba(0, 0, 0, 0.85);
  margin-bottom: 8px;
}

.sub-title {
  color: rgba(0, 0, 0, 0.45);
  font-size: 14px;
  margin: 0;
}

.login-options {
  display: flex;
  justify-content: space-between;
  margin-bottom: 24px;
}

.forgot-link {
  color: #1890ff;
  cursor: pointer;
}

.forgot-link:hover {
  color: #40a9ff;
}

.other-login {
  margin-top: 24px;
}

.divider {
  position: relative;
  text-align: center;
  margin: 16px 0;
}

.divider::before,
.divider::after {
  content: '';
  position: absolute;
  top: 50%;
  width: calc(50% - 80px);
  height: 1px;
  background: #e8e8e8;
}

.divider::before {
  left: 0;
}

.divider::after {
  right: 0;
}

.divider span {
  padding: 0 16px;
  color: rgba(0, 0, 0, 0.45);
  background: white;
}

.social-login {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 16px;
}

.social-btn {
  color: rgba(0, 0, 0, 0.45);
  &:hover {
    color: #1890ff;
  }
}

:deep(.ant-input-affix-wrapper) {
  height: 40px;
}

:deep(.ant-card-body) {
  padding: 32px;
}
</style> 